<template>
  <div id="newsList">
    <div class="newsListContent">
      <div class="newsListSearch">
<!--        <span style="display: inline-block; vertical-align: middle; margin-right: .2rem;" v-show="sceneType === 'angell'">-->
<!--          <user-select :showRadio="true"></user-select>-->
<!--        </span>-->
<!--        <span style="display: inline-block; vertical-align: middle; margin-right: .2rem;" v-show="sceneType === 'angell'">-->
<!--          <user-select :showRadio="true"></user-select>-->
<!--        </span>-->
        <label for="newsListSearchId" style="vertical-align: middle; margin-right: .2rem;">
          <img src="../../assets/img/home/news_search.png" @click="onPageChange(1)" alt="">
          <input id="newsListSearchId" type="text" placeholder="搜索" v-model="searchText" @keydown.enter="onPageChange(1)">
        </label>
        <div class="btnBox">
          <button class="btnDef" @click="onPageChange(1)">搜索</button>
        </div>
      </div>
      <div class="newsListView">
        <ul>
          <li v-for="(item, index) in collectionOptimal" :key="'excellent' + index" @click="jumpTo('/newsDetail?sceneType=excellentProduct&excellentProductId=' + item.id)" v-show="sceneType === 'excellent'">
            <img class="newsListViewImg" :src="$globalImageUrl + item.innovateImg" alt="">
            <div class="newsListViewInfo">
              <h2>{{item.title}}</h2>
              <p>{{item.createTime}}</p>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
          <li v-for="(item, index) in dreamWorksData" :key="'dreamWorks' + index" @click="jumpTo('/newsDetail?sceneType=dreamWorks&dreamWorksId=' + item.id)" v-show="sceneType === 'dreamWorks'">
            <img class="newsListViewImg" :src="$globalImageUrl + item.factoryImg" alt="">
            <div class="newsListViewInfo">
              <h2>{{item.factoryName}}</h2>
              <p>{{item.createTime}}</p>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
          <li v-for="(item, index) in angellData" :key="'angell' + index" @click="jumpTo('/newsDetail?sceneType=angell&angellId=' + item.id)" v-show="sceneType === 'angell'">
            <img class="newsListViewImg" :src="$globalImageUrl + item.troupeImg" alt="">
            <div class="newsListViewInfo">
              <h2>{{item.troupeName}}</h2>
              <p>{{item.createTime}}</p>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
          <li v-for="(item, index) in tutorData" class="borBtm" :key="'tutor' + index" @click="jumpTo('/tutorDetail?tutorId=' + item.id)" v-show="sceneType === 'tutor'">
            <div class="newsListViewLeft">
              <img :src="$globalImageUrl + item.tutorImg" alt="">
              <div class="newsListViewLeftTutorCon">
                <h2>{{item.tutorName}}</h2>
                <p><span>{{item.school}}</span> | <span>{{item.position}}</span></p>
              </div>
            </div>
            <div class="newsListViewRight">
              <p>{{item.industryId}}</p>
            </div>
          </li>
          <li v-for="(item, index) in createCourseData" :key="'createCourse' + index" @click="jumpTo('/newsDetail?sceneType=createCourse&createCourseId=' + item.id)" v-show="sceneType === 'createCourse'">
            <div class="newsListViewImg">
              <h2>{{item.createTime.slice(8, 10)}}</h2>
              <span>{{item.createTime.slice(0, 7)}}</span>
            </div>
            <div class="newsListViewInfo newsListViewInfo2">
              <h2>{{item.name}}</h2>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
          <li v-for="(item, index) in journalismData" :key="'home' + index" @click="jumpTo('/newsDetail?sceneType=megagame&megagameNewsId=' + item.newsId)" v-show="sceneType === 'home' || sceneType === 'megagame'">
            <div class="newsListViewImg">
              <h2>{{item.createTime.slice(8, 10)}}</h2>
              <span>{{item.createTime.slice(0, 7)}}</span>
            </div>
            <div class="newsListViewInfo newsListViewInfo2">
              <h2>{{item.newsTitle}}</h2>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
          <li v-for="(item, index) in policyElucidation" :key="'policy' + index" @click="jumpTo('/newsDetail?megagameNewsId=' + item.newsId)" v-show="sceneType === 'policy' || sceneType === 'megagame'">
            <div class="newsListViewImg">
              <h2>{{item.createTime.slice(8, 10)}}</h2>
              <span>{{item.createTime.slice(0, 7)}}</span>
            </div>
            <div class="newsListViewInfo newsListViewInfo2">
              <h2>{{item.newsTitle}}</h2>
              <img src="../../assets/img/login/icon_right.png" alt="">
            </div>
          </li>
        </ul>
      </div>
      <page-number
        :pageTotal="pageTotals"
        @prevPage="onPrevPage($event)"
        @pageActive="onPageActive($event)"
        @nextPage="onNextPage($event)"
        @pageChange="onPageChange($event)"
      ></page-number>
    </div>
  </div>
</template>

<script>
import pageNumber from '../../components/pageNumber/index.vue'
import userSelect from '../../components/userSelect/userSelect'

export default {
  name: 'newsList',
  components: {
    pageNumber,
    userSelect
  },
  data () {
    return {
      pageTotals: 1,
      sceneType: this.$route.query.sceneType,
      journalismData: [],
      searchText: '',
      collectionOptimal: [],
      // newsBusinessData: [],
      dreamWorksData: [],
      angellData: [],
      tutorData: [],
      createCourseData: [],
      newsData: [],
      policyElucidation: []
    }
  },
  created () {
    this.onPageChange(1)
  },
  methods: {
    onPrevPage (val) {
    },
    onPageActive (val) {
    },
    onNextPage (val) {
    },
    onPageChange (val) {
      if (!this.sceneType) {
      } else if (this.sceneType === 'home') {
        this.fetchSelectNews(val)
      } else if (this.sceneType === 'excellent') {
        this.fetchInnovateGoods(val)
      } else if (this.sceneType === 'dreamWorks') {
        this.fetchDreamFactory(val)
      } else if (this.sceneType === 'angell') {
        this.fetchAngelTroupe(val)
      } else if (this.sceneType === 'tutor') {
        this.fetchTutor(val)
      } else if (this.sceneType === 'createCourse') {
        this.fetchCurriculum(val)
      } else if (this.sceneType === 'megagame') {
        this.fetchNews(val)
      } else if (this.sceneType === 'policy') {
        this.fetchSelectPolicy(val)
      }
    },
    // 获取政策解读
    fetchSelectPolicy (val) {
      this.$api.getSelectPolicy({
      }).then(res => {
        this.policyElucidation = res.data
        console.log(res.data)
      })
    },
    // 获取新闻公告
    fetchSelectNews (val) {
      this.$api.getSelectNews({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        console.log(res)
        this.journalismData = res.data
        this.pageTotals = Math.ceil(res.total / 10)
      })
    },
    // 获取优品汇列表
    fetchInnovateGoods (val) {
      this.$api.getInnovateGoods({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        this.collectionOptimal = res.data
        // for (let i = 0; i < res.data.length; i++) {
        //   this.newsBusinessData.push({
        //     imgUrl: res.data[i].innovateImg,
        //     title: res.data[i].title,
        //     createTime: res.data[i].createTime,
        //     id: res.data[i].id
        //   })
        // }
        this.pageTotals = Math.ceil(res.total / 10)
      })
    },
    // 获取创业梦工厂
    fetchDreamFactory (val) {
      this.$api.getDreamFactory({
        pageNum: val,
        searchText: this.searchText
      }).then(res => {
        this.dreamWorksData = res.data
        // for (let i = 0; i < res.data.length; i++) {
        //   this.newsBusinessData.push({
        //     imgUrl: res.data[i].factoryImg,
        //     title: res.data[i].factoryName,
        //     createTime: res.data[i].createTime,
        //     id: res.data[i].id
        //   })
        // }
        this.pageTotals = Math.ceil(res.total / 10)
      })
    },
    // 获取创业天使团
    fetchAngelTroupe (val) {
      this.$api.getAngelTroupe({
        pageNum: val,
        industry: this.searchText
        // troupeType: ''
      }).then(res => {
        if (res.code === 0) {
          this.angellData = res.data
          // for (let i = 0; i < res.data.length; i++) {
          //   this.newsBusinessData.push({
          //     imgUrl: res.data[i].troupeImg,
          //     title: res.data[i].troupeName,
          //     createTime: res.data[i].createTime,
          //     id: res.data[i].id
          //   })
          // }
          this.pageTotals = Math.ceil(res.total / 10)
        }
      })
    },
    // 获取创业导师
    fetchTutor (val) {
      this.$api.getTutor({
        pageNum: val,
        industryId: '',
        searchText: this.searchText
      }).then(res => {
        if (res.code === 0) {
          this.tutorData = res.data
          // for (let i = 0; i < res.data.length; i++) {
          //   this.newsBusinessData.push({
          //     imgUrl: res.data[i].troupeImg,
          //     title: res.data[i].troupeName,
          //     createTime: res.data[i].createTime,
          //     id: res.data[i].id
          //   })
          // }
          this.pageTotals = Math.ceil(res.total / 10)
        }
      })
    },
    // 获取创业课程
    fetchCurriculum (val) {
      this.$api.getCurriculum({
        searchText: this.searchText,
        pageNum: val
      }).then(res => {
        if (res.code === 0) {
          this.createCourseData = res.data
          // for (let i = 0; i < res.data.length; i++) {
          //   this.newsBusinessData.push({
          //     imgUrl: res.data[i].troupeImg,
          //     title: res.data[i].troupeName,
          //     createTime: res.data[i].createTime,
          //     id: res.data[i].id
          //   })
          // }
          this.pageTotals = Math.ceil(res.total / 10)
        }
      })
    },
    // 获取大赛新闻列表
    fetchNews (val) {
      this.$api.getNews({
        searchText: this.searchText,
        pageNum: val
      }).then(res => {
        if (res.code === 0) {
          this.journalismData = res.data
          // for (let i = 0; i < res.data.length; i++) {
          //   this.newsBusinessData.push({
          //     imgUrl: res.data[i].troupeImg,
          //     title: res.data[i].troupeName,
          //     createTime: res.data[i].createTime,
          //     id: res.data[i].id
          //   })
          // }
          this.pageTotals = Math.ceil(res.total / 10)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#newsList{
  .newsListContent{
    width: 1200px;
    margin: auto;
    padding: .2rem 0;
    .newsListSearch{
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: .2rem;
      /deep/ .userSelect{
        font-size: 0;
      }
      label{
        display: inline-block;
        width: 2rem;
        height: .4rem;
        border: 1px solid #ddd;
        border-radius: .05rem;
        position: relative;
        img{
          width: .2rem;
          height: .2rem;
          display: inline-block;
          position: absolute;
          left: .1rem;
          top: 50%;
          transform: translateY(-50%);
        }
        input{
          display: inline-block;
          width: 100%;
          height: 100%;
          padding-left: .4rem;
          border-radius: .05rem;
          font-size: .14rem;
          font-weight: 500;
          color: #333;
          line-height: .22rem;
        }
      }
      .btnBox{
      width: 80px;
      vertical-align: top;
    }
    }
    .newsListView{
      ul{
        padding: .2rem;
        margin-top: .2rem;
        background-color: #fff;
        li{
          font-size: 0;
          padding-bottom: .2rem;
          .newsListViewImg{
            width: 1rem;
            height: 1rem;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            h2{
              font-size: .22rem;
              font-weight: 500;
              color: #333;
              line-height: .3rem;
              padding-top: .2rem;
            }
            span{
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .3rem;
            }
          }
          .newsListViewInfo{
            display: inline-block;
            width: calc(100% - 1rem);
            vertical-align: middle;
            padding-left: .2rem;
            position: relative;
            h2{
              font-size: .18rem;
              font-weight: 500;
              color: #333;
              line-height: .26rem;
            }
            p{
              font-size: .14rem;
              font-weight: 500;
              color: #999;
              line-height: .22rem;
            }
            img{
              position: absolute;
              right: .2rem;
              top: 50%;
              transform: translateY(-50%);
              background-color: #fff;
              opacity: .5;
            }
          }
          .newsListViewInfo2{
            border-left: 1px solid #ccc;
            h2{
              line-height: .55rem;
            }
          }
          .newsListViewLeft{
            width: 50%;
            display: inline-block;
            img{
              width: .8rem;
              height: .8rem;
              display: inline-block;
              border-radius: 500px;
            }
            .newsListViewLeftTutorCon{
              display: inline-block;
              vertical-align: middle;
              padding-left: .2rem;
              h2{
                font-size: .16rem;
                font-weight: bold;
                line-height: .24rem;
                color: #333;
              }
              p{
                font-size: .14rem;
                font-weight: 500;
                line-height: .22rem;
                color: #999;
                span{
                  font-size: .14rem;
                  font-weight: 500;
                  line-height: .22rem;
                  color: #999;
                }
              }
            }
          }
          .newsListViewRight{
            width: 50%;
            display: inline-block;
            vertical-align: middle;
            p{
              font-size: .16rem;
              font-weight: 500;
              line-height: .24rem;
              color: #333;
            }
          }
        }
        li:last-child{
          padding-bottom: 0;
        }
        li.borBtm{
          padding: .1rem 0;
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}
</style>
